<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../css/normalize.css"/>
    <link rel="stylesheet" href="../../css/fa.css"/>
    <link rel="stylesheet" href="../../css/icon.css"/>
    <link rel="stylesheet" href="../../css/ares_animate.min.css"/>
    <link rel="stylesheet" href="../../css/ares_hover_variant.min.css"/>
    <link rel="stylesheet" href="../../css/ares_reboot.css"/>
    <link rel="stylesheet" href="../../css/app.min.css"/>
    <link rel="stylesheet" href="../../css/iframe.css"/>
    <style>
        .layui-form-label {
            width: 130px;
        }
        .layui-input-block {
            margin-left: 130px;
        }
        #treatment-type {
            line-height: 36px;
        }
    </style>

</head>
<body>
<form class="ares-p layui-form" lay-filter="form">
    <div class="layui-form-item">
        <label class="layui-form-label">设备类型</label>
        <div class="layui-input-block">
            <select name="type" lay-verify="required" lay-filter="type">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">设备名称</label>
        <div class="layui-input-block">
            <input name="name" placeholder="请输入设备名称" class="layui-input" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">负责人</label>
        <div class="layui-input-block">
            <select name="manager" lay-verify="required">
                <option value=""></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">可同时治疗人数</label>
        <div class="layui-input-block">
            <select name="treatPeople" lay-verify="required">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">治疗项目类别</label>
        <div id="treatment-type" class="layui-input-block"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">项目</label>
        <div class="layui-input-block">
            <select name="project" lay-verify="required">
                <option value="">请选择</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submit">提交表单</button>
        </div>
    </div>
</form>

</body>

<script type="text/javascript" src="../../plugins/layui/layui.js"></script>
<script type="text/javascript" src="../../aresExtends/config/layuiConfig.js"></script>
<script>
    layui.use([ 'form', 'utils', 'mandyServices', 'qs'], function (form,utils, mandyServices, qs) {
        var queryParams = qs.parse(location.search.substr(1)),
            $type = $('select[name="type"]'),
            $name = $('input[name="name"]'),
            $manager = $('select[name="manager"]'),
            $project = $('select[name="project"]'),
            $treatmentType = $('#treatment-type');

        form.on('submit(submit)', function (data) {
            var fields = data.field,
                service = null,
                $this = $(data.elem);
            console.log(fields, $this)
            if (queryParams.id) {
                service = modifyProjectMes
            } else {
                service = addProject
            }
            if (!service) return;
            $this.prop('disabled', true).addClass('layui-btn-disabled')
            service(fields).then(function (res) {
                utils.msgSuccess(res.message)
                $this.prop('disabled', false).removeClass('layui-btn-disabled')
                utils.layer.closeAll('iframe');
                utils.ARES.event.emit('updateProjectList');
            }).catch(function (err) {
                $this.prop('disabled', false).removeClass('layui-btn-disabled')
            })
            return false;
        });
        form.on('select(type)', function (data) {
            getItemProfile(data.value);
        });
        form.render();

        if (queryParams.id) {
            getTypes().then(function () {
                buildProfileForm().then(function (data) {
                    getItemProfile(data.device_type.id);
                })
            })
        } else {
            getTypes().then(function () {
                getItemProfile(form.val('form').type);
            });
        }

        //增加设备按钮单击事件
        function getTypes() {
            return mandyServices.mandy_get_prescriptionType_syn().then(function (res) {
                var deviceType = $('select[name="type"]'),
                    data = res.data;
                deviceType.empty();
                $.each(data.prcp_type_list, function (idx, val) {
                    var option = $("<option>");
                    option.text(val.alias);
                    option.attr("value", val.id);
                    option.data("n", val.name);
                    deviceType.append(option);
                })
                form.render('select');
            })
        }

        //通过设备类型查询治疗项目和负责人及项目
        function getItemProfile(typeId) {
           var treatmentTypeName = $type.find('option[value="'+typeId+'"]').data('n');
            $treatmentType.text(treatmentTypeName);
            mandyServices.mandy_get_leader(typeId).then(function (res) {
                var manager = $('select[name="manager"]'),
                    data = res.data;
                manager.empty();
                $.each(data.list, function (idx, val) {
                    var option = $("<option>");
                    option.text(val.name);
                    option.attr("value", val.id);
                    manager.append(option);
                })
                form.render('select');
            })
            mandyServices.mandy_get_device_project(typeId).then(function (res) {
                var project = $('select[name="project"]'),
                    data = res.data;
                project.empty();
                $.each(data.list, function (idx, val) {
                    var option = $("<option>");
                    option.text(val.itemName);
                    option.attr("value", val.id);
                    project.append(option);
                })
                form.render('select');
            })
        }

        //增加设备
        function addDevice(data) {
            var projectName = $project.next().find(".layui-this").text(),
                managerName = $manager.next().find(".layui-this").text();
            mandyServices.mandy_post_add_device_lev2(data.type, data.name, data.project, projectName, data.manager, managerName, data.treatPeople);
        }

        //查询单条设备信息
        function buildProfileForm() {
           return mandyServices.mandy_get_device_by_id(queryParams.id).then(function (res) {
                var data = res.data;
                $type.prop("disabled", true);
                $name.prop("disabled", true);
                $project.prop("disabled", true);
                form.val("form", {
                    type: data.device_type.id,
                    name: data.name,
                    manager: data.profile_id,
                    treatPeople: data.treatPeople,
                    cureTime: data.treatTime,
                    project: data.subitem_name,
                });
                return res.data;
            })

        }

        //修改设备信息
        function modifyDeviceMes(data) {
            var directorName = $manager.next().find(".layui-this").text();
            mandyServices.mandy_update_device(queryParams.id, data.treatPeople, directorName)
        }

    })
</script>


</html>